<template>
    <rx-dialog class="rx-city" :options="dialogOptions"  @close="close" @confirm="confirm">
        <div class="city-center">
            <view class="city-input">
                <input v-model="searchForm.value" type="text" :placeholder="i18n('inputSearchName','请输入城市名称进行搜索')"
                       placeholder-style="color: #576999"/>
            </view>
            <view class="indexlist">
                <uni-indexed-list v-if="!searchList || searchList.length==0" :options="list" :showSelect="false" @click="bindClick"
                                  @viewMore="viewMore"></uni-indexed-list>
                <uni-search-indexed-list v-else :options="searchList" :showSelect="false"
                                         @click="bindClick"></uni-search-indexed-list>
            </view>
        </div>
    </rx-dialog>
</template>

<script>
import UniIndexedList from './uni-indexed-list.vue'
import UniSearchIndexedList from './uni-search-indexed-list.vue'
import {listHot, listFn, pushList, listFamiliar} from './city-data'
import http from '@/assets/ajax.js';
import Util from '@/js/Util.js'
import BaseDialogComponent from "@/components/layer/BaseDialogComponent.js";

export default {
    mixins:[BaseDialogComponent],
    components: {
        UniIndexedList,
        UniSearchIndexedList
    },
    data() {
        return {
            tabsList: [{
                name: this.i18n('domestic', '国内')
            }, {
                name: this.i18n('international', '国际/港澳台')
            }],
            searchForm: {
                categoryId: 0,
                value: '',
            },
            height: 0,
            list: [],
            searchList: [],
            dialogOptions:{},
            eventName:''
        }
    },
    onLoad(params) {
        let sealDialog = uni.getStorageSync('openCity')
        this.eventName = sealDialog.eventName;
        let obj = sealDialog.params;
        this.dialogOptions = obj.dialogOptions
        this.getByCategory()
        this.getHeight()
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "rxCityLang", key);
        },
        getSearchValue: Util.debounce(function (val) {
            this.searchValue(val)
        }, 500),
        // 查询信息内容
        async searchValue(val) {
            const res = await http.postForm('/api-form/form/core/formCity/getByKey', {
                key: val
            })
            this.searchList = res.data
        },
        tabChange(index) {
            this.searchForm.categoryId = index;
            if (this.searchForm.value) {
                this.searchValue(this.searchForm.value)
                return;
            }
            this.list = []
            this.getByCategory()
        },
        // 获取热门城市
        async getByCategory() {
            let historyCity = []
            try {
                const res = await http.get(`/api-form/form/core/formPopularCity/getByCategory?categoryId=${this.searchForm.categoryId + 1}`)
                this.list = listHot(res.data);
                this.list = listFamiliar(this.list, historyCity);
                // 获取字母
                this.getByCategoryAndCode()
            } catch (error) {
                console.log(error);
            }
        },
        async getByCategoryAndCode() {
            try {
                let params = {
                    pageNo: 1,
                    pageSize: 10,
                    params: {
                        isMobile: "YES",
                        categoryId: this.searchForm.categoryId + 1,
                        code: 'ABCDEFGHIJKLM'
                    }
                }
                const res = await http.postJson('/api-form/form/core/formCity/getByCategoryAndCode', params);
                this.list = listFn(this.list, res.data)
                this.getByCategoryAndCodeOptimize(0)
            } catch (error) {
                console.log(error);
            }
        },
        async getByCategoryAndCodeOptimize(i) {
            const english = ['NOPQRSTUVWSXYZ']
            try {
                let params = {
                    pageNo: 1,
                    pageSize: 10,
                    params: {
                        isMobile: "YES",
                        categoryId: this.searchForm.categoryId + 1,
                        code: english[i]
                    }
                }
                const res = await http.postJson('/api-form/form/core/formCity/getByCategoryAndCode', params)
                if (i > 1) {
                    i++
                    this.getByCategoryAndCodeOptimize(i)
                }
                this.list = pushList(this.list, res.data)
            } catch (error) {
                console.log(error);
            }
        },
        bindClick(e) {
            let self = this;
            uni.navigateBack({
                delta: 1,
                success: function () {
                    uni.$emit(self.eventName,e)
                }
            })
        },
        async viewMore(list) {
            const {itemIndex} = list;
            const currentData = this.list[itemIndex]
            this.list[itemIndex].pageNo = currentData.pageNo + 1;
            try {
                let params = {
                    "pageNo": this.list[itemIndex].pageNo,
                    "pageSize": 10,
                    "sortField": "CODE_",
                    "sortOrder": "desc",
                    "params": {
                        "Q_CODE__S_RIK": list.key,
                        "Q_IS_LEAF__I_EQ": 1,
                        "Q_CATEGORY__I_EQ": this.searchForm.categoryId + 1
                    }
                }
                let res  = await http.postJson('/api-form/form/core/formCity/getByCategoryAndCodePage', params);
                let result = res.result;
                this.list[itemIndex].totalPage = result.totalPage;
                this.list[itemIndex].data = [...currentData.data, ...result.data]
            } catch (error) {
                console.log(error);
            }
        },
        getHeight() {
            let self = this
            uni.getSystemInfo({
                success: function (res) {
                    self.height = res.windowHeight * 0.9 - 50
                }
            });
        },
        confirm() {
            let self = this;
            uni.navigateBack({
                delta: 1,
                success: function () {
                    uni.$emit(self.eventName, '')
                }
            })
        },
        close() {
            let self = this;
            uni.navigateBack({
                delta: 1,
                success: function () {
                    uni.$emit(self.eventName,'')
                }
            })
        },
    },
    watch: {
        'searchForm.value': function (val, oldVal) {
            if (val !== oldVal) {
                this.getSearchValue(val)
            }
        }
    },
}
</script>

<style scoped>
.rx-city>>>.m-mobile-roll{
    padding: 0rem;
}
.city-center{
    background: white;
    display: flex;
    flex-direction: column;
    overflow: auto;
    padding: 0.2rem;
    border-radius: 5px;
    height: 100%;
    width: 100%;
    overflow: auto;
    box-sizing: border-box;
}
.indexlist {
    position: relative;
    flex: 1;
    overflow: auto;
}
.city-input-search {
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 0.5rem;
}

.city-input {
    border-radius: 4px;
    border: 1px solid var(--line, #DCDFEB);
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
    padding: 0.5rem;
    display: flex;
    align-items: center;
}

.tab-list {
    font-size: 0.9rem;
}

.uni-input-input {
    color: #576999;
}
</style>
